<!DOCTYPE html>
<html>
  <head>
    <title>HOME</title>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var lastTouchEnd = 0;
        document.addEventListener(
          "touchend",
          function (event) {
            var now = new Date().getTime();
            if (now - lastTouchEnd <= 300) {
              event.preventDefault();
            }
            lastTouchEnd = now;
          },
          false
        );
      });
    </script>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 80vh;
        background-color: #e9f5ff;
      }
      input {
        display: block;
        margin-top: 9rem;
        width: 30rem;
        height: 10rem;
        background: -webkit-linear-gradient(
          60deg,
          rgba(250, 250, 250, 1) 25%,
          rgba(200, 200, 200, 1)
        );
        border: 1px solid#ddd;
        border-radius: 3rem;
        font-size: 3rem;
        color: rgb(165, 165, 165);
      }
      input[type="submit"] {
        border-radius: 10rem;
        box-shadow: 0 4px 8px #00000040, 0 8px 16px #00000026,
          0 16px 32px #00000020;
      }
      input:active {
        box-shadow: inset 0 4px 8px #0000001a, inset 0 4px 4px #0003,
          inset 0 -6px 8px #0000001a;
      }
      #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1);
        z-index: 9999;
        display: none;
      }
      #top input {
        width: 10rem;
        height: 5rem;
        display: inline;
        margin-top: 0rem;
        text-align: center;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <form action="" method="get">
      <input style="display: none" name="password" value="{password}" />
      <div id="top">
        <input type="submit" name="action" value="tighten" />
        <input
          style="
            background: linear-gradient(65deg, #e7dfad 49.5%, #63544a 50.5%);
            border-radius: 2rem;
          "
          type="submit"
          name="action"
          value="Switch"
        />
        <input type="submit" name="action" value="loose" />
      </div>
      <input type="submit" name="action" value="Open" />
      <input type="submit" name="action" value="Ready" />
    </form>
    <div id="overlay"></div>
  </body>
  <script>
    let password = document.querySelector('input[name="password"]').value;
    let token =
      password === ""
        ? "&superpassword=" + getSuperPassword()
        : "&password=" + password;
    function init() {
      var submitInputs = document.querySelectorAll('input[type="submit"]');
      submitInputs.forEach(function (submitInput) {
        submitInput.addEventListener("click", function (event) {
          event.preventDefault();
          let overlay = document.getElementById("overlay");
          overlay.style.display = "block";

          let action = submitInput.value;
          let xhr = new XMLHttpRequest();
          if (action !== "Switch") {
            xhr.open("GET", "?action=" + action + token, true);
            xhr.onload = function () {
              if (action === "Ready")
                alert("Set unLock time to " + xhr.responseText + " seconds");
              overlay.style.display = "none";
            };
            xhr.onerror = function () {
              alert("Request failed");
              overlay.style.display = "none";
            };
            xhr.send();
          } else {
            overlay.style.display = "none";
            location.assign("/?action=" + action + token);
          }
        });
      });
    }
    function getSuperPassword() {
      var queryString = window.location.search.slice(1);
      var params = {};
      queryString.split("&").forEach(function (pair) {
        var keyValue = pair.split("=");
        var key = decodeURIComponent(keyValue[0]);
        var value = decodeURIComponent(keyValue[1] || "");

        params[key] = value;
      });
      return params["superpassword"];
    }
    init();
  </script>
</html>
